<!--这个组件主要用于个人中心和资讯天地，作为公用的布局框架-->
<template>
  <div>
    <slot name="background"></slot>
    <section class="container">
      <el-row :gutter="24">
        <el-col :span="4">
          <el-menu default-active="0">
            <el-menu-item :index="i+''" v-for="(item,i) in sideBarItems" :key="i">
              <router-link  tag="div" :to="item.url" class="sideMenuItem" :active-class="'sideBarActive'">
                {{item.label}}
              </router-link>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="20" class="content">
          <slot name="content"></slot>
        </el-col>
      </el-row>
    </section>
  </div>
</template>
<script>
  export default{
    props:{
      sideBarItems:{
        validator(items){
          if(items instanceof Array){
            return items.every((item)=>{
              return 'label' in item && 'url' in item;
            });
          }else{
            return false;
          }
        }
      }
    },
    data(){
      return {
      }
    }
  }
</script>
<style scoped>
  /*#bg{*/
    /*height:400px;*/
    /*background-image: url("../assets/personal_bg.png");*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
    /*background-position: top center;*/
  /*}*/

  /*.sideBar{*/
  /*list-style: none;*/
  /*padding:0;*/
  /*}*/
  /*.sideBar>li{*/
  /*padding:10px 15px;*/

  /*}*/
  /*.bgWrapper{*/
    /*position: relative;*/
    /*top: 35%;*/
    /*height: 210px;*/
  /*}*/
  /*.bgWrapper>div{*/
    /*border-radius: 25px;*/
  /*}*/
  /*.personFigure{*/
    /*float: left;*/
    /*margin-left: 50px;*/
    /*height: inherit;*/
    /*padding: 15px 30px;*/
    /*background-color: rgba(255,255,255,0.7);*/
  /*}*/
  /*.personFigure>div{*/
    /*padding: 2px;*/
    /*text-align: center;*/
  /*}*/
  /*.slide{*/
    /*float: right;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*margin-right: 50px;*/
    /*height:inherit;*/
    /*background-color: rgba(255,255,255,0.7);*/
  /*}*/
  /*.slideItem{*/
    /*padding: 0px 20px;*/
    /*text-align: center;*/
  /*}*/
  /*.slide>.slideIcon{*/
    /*font-size: 30px;*/
    /*color: #fbb7c8;;*/
  /*}*/
  /*.icons{*/
    /*width: 20px;*/
    /*height: 20px;*/
    /*padding: 2px;*/
    /*box-sizing: content-box;*/
  /*}*/
  .container{
    margin: 15px 100px;
    border: solid 2px #e195af4f;
  }
  .content{
  
  }
  .sideMenuItem{
    margin:0px -20px;
    text-align: center;
  }
  .sideBarActive{
    /*background-origin: ;*/
    color: #f85377;
  }
</style>